<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <script type="text/javascript" src="../helper.js"></script>
  <style type="text/css">
  html{color:black;background:white;}
  body,button,td,th,input,select{font:11px Verdana,sans-serif;}</style>
</head>
<body id="body">
  <h1>Selector Showcase</h1>
  <p>This is the first paragraph.</p>
  <ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
    <li id="third-item">List Item 3</li>
    <li>List Item 4</li>
    <li>List Item 5</li>
  </ul>
  <p>Another paragraph</p>
  <h2>Subheader</h2>
  <ol>
    <li><a href="http://qooxdoo.org">qooxdoo Link</a></li>
    <li><a href="#">Empty Link</a></li>
  </ol>  
  <h2 class="form">Form</h2>
  <form action="#">
    <label for="field-name">Name</label>
    <input type="text" name="name" id="field-name"/>
    <label for="field-gender">Gender</label>
    <select name="gender" id="field-gender">
      <option value="male">Male</option>
      <option value="female">Female</option>
    </select>
    <label for="field-mail">E-Mail</label>
    <input type="text" name="mail" id="field-mail"/>
    <label for="field-country">Country</label>
    <input type="text" name="country" id="field-ncountryame"/>
    <input type="submit" value="Send"/>
    <input type="checkbox" name="car" value="ford" id="car-ford"/>
    <label for="car-ford">Ford</label>
    <input type="checkbox" name="car" value="audi" id="car-audi"/>
    <label for="car-audi">Audi</label>
  </form>
  <p id="detail1">Detail 1</p>
  <p id="detail2">Detail 2</p>
  <p id="detail3">Detail 3</p>
</body>
</html>